<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  min-height: 100vh;
			}
			
			.btn {
			  margin: 1rem;
			}
			.btn-jittery {
			  -webkit-animation: jittery 4s infinite;
			          animation: jittery 4s infinite;
			}
			.btn-icon {
			  position: relative;
			  margin-left: 8px;
			  overflow: hidden;
			}
			.btn-icon i {
			  position: absolute;
			  top: 41%;
			  left: 48%;
			  transform: scale(0.75) translate(-16%, 400%);
			  transition: 0.2s;
			}
			.btn-icon span {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  transition: 0.2s;
			}
			.btn-icon:hover i {
			  transform: scale(0.75) translate(-16%, 0);
			}
			.btn-icon:hover span {
			  transform: translateY(-400%);
			}
			.btn-jelly:hover {
			  -webkit-animation: jelly 0.5s;
			          animation: jelly 0.5s;
			}
			.btn-fill {
			  transition: 0.3s;
			}
			.btn-fill:hover {
			  background: transparent;
			  box-shadow: inset 0 0 0 36px var(--btn-bg);
			}
			.btn-open {
			  transition: 0.3s;
			}
			.btn-open::before {
			  position: absolute;
			  content: "";
			  top: 0;
			  left: 0;
			  z-index: -1;
			  width: 100%;
			  height: 100%;
			  background: var(--btn-bg);
			  transform: scaleX(0);
			  transition: 0.3s;
			}
			.btn-open:hover {
			  background: transparent;
			}
			.btn-open:hover::before {
			  transform: scaleX(1);
			}
			.btn-pulse:hover {
			  box-shadow: 0 0 0 18px transparent;
			  -webkit-animation: pulse 1s;
			          animation: pulse 1s;
			}
			.btn-close {
			  transition: 0.3s;
			}
			.btn-close:hover {
			  background: transparent;
			  box-shadow: inset 54px 0 0 0 var(--btn-bg), inset -54px 0 0 0 var(--btn-bg);
			}
			.btn-slash {
			  overflow: hidden;
			  transition: 0.3s;
			}
			.btn-slash::before {
			  position: absolute;
			  content: "";
			  top: 50%;
			  left: 50%;
			  z-index: -1;
			  width: 120%;
			  height: 210%;
			  background: var(--btn-bg);
			  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
			  transition: 0.3s;
			}
			.btn-slash:hover {
			  background: transparent;
			}
			.btn-slash:hover::before {
			  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
			}
			.btn-fill-up {
			  transition: 0.3s;
			}
			.btn-fill-up:hover {
			  background: transparent;
			  box-shadow: inset 0 -54px 0 0 var(--btn-bg);
			}
			.btn-slide {
			  transition: 0.3s;
			}
			.btn-slide:hover {
			  background: transparent;
			  box-shadow: inset 90px 0 0 0 var(--btn-bg);
			}
			.btn-through {
			  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
			}
			.btn-through::before {
			  position: absolute;
			  content: "";
			  top: 0;
			  left: 0;
			  z-index: -1;
			  width: 100%;
			  height: 100%;
			  background: var(--btn-bg);
			  transform: scaleX(0);
			  transform-origin: right;
			  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
			}
			.btn-through:hover {
			  color: white;
			  background: transparent;
			}
			.btn-through:hover::before {
			  transform: scaleX(1);
			  transform-origin: left;
			}
			.btn-offset {
			  border-radius: 0;
			  box-shadow: 6px 6px 0 0 var(--btn-bg), inset 6px 6px 0 0 var(--btn-bg);
			  transition: 0.3s;
			}
			.btn-offset:hover {
			  background: transparent;
			  box-shadow: 0 0 0 0 var(--btn-bg), inset 108px 72px 0 0 var(--btn-bg);
			}
			.btn-flip-down {
			  --flip-button-height: 40px;
			  height: var(--flip-button-height);
			  color: transparent;
			  border: none;
			  border-radius: 0;
			  perspective: 500px;
			  transition: 0.3s;
			}
			.btn-flip-down:hover {
			  color: transparent;
			  background: transparent;
			}
			.btn-flip-down .front,
			.btn-flip-down .back {
			  position: absolute;
			  top: 0;
			  left: 0;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			}
			.btn-flip-down .front {
			  background: var(--btn-bg);
			  color: white;
			  transition: 0.3s;
			  transform-origin: center center calc(var(--flip-button-height) / -2);
			}
			.btn-flip-down .back {
			  color: white;
			  background: var(--btn-bg);
			  transform: rotateX(88deg);
			  transform-origin: center center calc(var(--flip-button-height) / -2);
			  transition: 0.3s;
			}
			.btn-flip-down:hover .front {
			  transform: rotateX(-90deg);
			}
			.btn-flip-down:hover .back {
			  transform: rotateX(0deg);
			}
			.btn-marquee {
			  font-weight: 600;
			  border: none;
			  overflow: hidden;
			  transition: 0.3s;
			}
			.btn-marquee:hover {
			  transform: scale(1.1);
			}
			.btn-marquee span {
			  display: block;
			  padding: 0 20px;
			  -webkit-animation: move-left 2s linear infinite;
			          animation: move-left 2s linear infinite;
			}
			.btn-marquee span::after {
			  position: absolute;
			  content: attr(data-text);
			  top: 0;
			  left: 100%;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			}
			.btn-cross {
			  transform: rotate(0);
			  overflow: hidden;
			  transition: 0.3s;
			}
			.btn-cross::before, .btn-cross::after {
			  position: absolute;
			  content: "";
			  left: 0;
			  z-index: -1;
			  width: 100%;
			  height: 50%;
			  background: var(--btn-bg);
			  transform: scaleX(0);
			  transition: transform 0.5s;
			}
			.btn-cross::before {
			  top: 0;
			  transform-origin: left;
			}
			.btn-cross::after {
			  top: 50%;
			  transform-origin: right;
			}
			.btn-cross:hover {
			  background: transparent;
			}
			.btn-cross:hover::before, .btn-cross:hover::after {
			  transform: scaleX(1);
			}
			.btn-cross:hover::before {
			  transform-origin: right;
			}
			.btn-cross:hover::after {
			  transform-origin: left;
			}
			.btn-open-line {
			  border: none;
			  transition: 0.3s;
			}
			.btn-open-line::before, .btn-open-line::after {
			  position: absolute;
			  content: "";
			  left: 0;
			  width: 100%;
			  height: 1px;
			  background: var(--btn-bg);
			  opacity: 0;
			  transform: scaleX(0);
			  transition: 0.4s ease-in-out;
			}
			.btn-open-line::before {
			  top: 0;
			}
			.btn-open-line::after {
			  bottom: 0;
			}
			.btn-open-line:hover {
			  letter-spacing: 5px;
			  color: var(--btn-bg);
			  background: transparent;
			}
			.btn-open-line:hover::before, .btn-open-line:hover::after {
			  opacity: 1;
			  transform: scaleX(1.2);
			}
			
			@-webkit-keyframes jittery {
			  5%, 50% {
			    transform: scale(1);
			  }
			  10% {
			    transform: scale(0.9);
			  }
			  15% {
			    transform: scale(1.15);
			  }
			  20% {
			    transform: scale(1.15) rotate(-5deg);
			  }
			  25% {
			    transform: scale(1.15) rotate(5deg);
			  }
			  30% {
			    transform: scale(1.15) rotate(-3deg);
			  }
			  35% {
			    transform: scale(1.15) rotate(2deg);
			  }
			  40% {
			    transform: scale(1.15) rotate(0);
			  }
			}
			
			@keyframes jittery {
			  5%, 50% {
			    transform: scale(1);
			  }
			  10% {
			    transform: scale(0.9);
			  }
			  15% {
			    transform: scale(1.15);
			  }
			  20% {
			    transform: scale(1.15) rotate(-5deg);
			  }
			  25% {
			    transform: scale(1.15) rotate(5deg);
			  }
			  30% {
			    transform: scale(1.15) rotate(-3deg);
			  }
			  35% {
			    transform: scale(1.15) rotate(2deg);
			  }
			  40% {
			    transform: scale(1.15) rotate(0);
			  }
			}
			@-webkit-keyframes jelly {
			  25% {
			    transform: scale(0.9, 1.1);
			  }
			  50% {
			    transform: scale(1.1, 0.9);
			  }
			  75% {
			    transform: scale(0.95, 1.05);
			  }
			}
			@keyframes jelly {
			  25% {
			    transform: scale(0.9, 1.1);
			  }
			  50% {
			    transform: scale(1.1, 0.9);
			  }
			  75% {
			    transform: scale(0.95, 1.05);
			  }
			}
			@-webkit-keyframes pulse {
			  from {
			    box-shadow: 0 0 0 0 var(--btn-bg);
			  }
			}
			@keyframes pulse {
			  from {
			    box-shadow: 0 0 0 0 var(--btn-bg);
			  }
			}
			@-webkit-keyframes move-left {
			  to {
			    transform: translateX(-100%);
			  }
			}
			@keyframes move-left {
			  to {
			    transform: translateX(-100%);
			  }
			}
		</style>
	</head>
	<body>
		<div class="buttons">
		  <button class="btn">
		    Default
		  </button>
		  <button class="btn btn-primary">
		    Primary
		  </button>
		  <button class="btn btn-secondary">
		    Secondary
		  </button>
		  <button class="btn btn-success">
		    Success
		  </button>
		  <button class="btn btn-info">
		    Info
		  </button>
		  <button class="btn btn-warning">
		    Warning
		  </button>
		  <button class="btn btn-danger">
		    Danger
		  </button>
		  <button class="btn btn-primary btn-round">
		    Round
		  </button>
		  <button class="btn btn-primary btn-circle">
		    <i class="search-icon"></i>
		  </button>
		  <button class="btn btn-primary disabled">
		    Disabled
		  </button>
		  <button class="btn btn-primary loading">Loading</button>
		  <button class="btn btn-primary btn-ghost">Ghost</button>
		  <button class="btn btn-primary">
		    <i class="plus-icon"></i><span>Icon</span>
		  </button>
		  <button class="btn btn-primary btn-dashed">Dashed</button>
		  <button class="btn btn-primary btn-link">Link</button>
		  <button class="btn btn-primary btn-jittery">
		    Click Me
		  </button>
		  <button class="btn btn-primary btn-jelly">
		    Jelly
		  </button>
		  <button class="btn btn-primary btn-ghost btn-fill">
		    Fill In
		  </button>
		  <button class="btn btn-primary btn-pulse">
		    Pulse
		  </button>
		  <button class="btn btn-primary btn-ghost btn-open">
		    Open
		  </button>
		  <button class="btn btn-primary btn-ghost btn-close">
		    Close
		  </button>
		  <button class="btn btn-primary btn-ghost btn-slash">
		    Slash
		  </button>
		  <button class="btn btn-primary btn-ghost btn-fill-up">
		    Fill Up
		  </button>
		  <button class="btn btn-primary btn-ghost btn-slide">
		    Slide
		  </button>
		  <button class="btn btn-primary btn-ghost btn-through">
		    Through
		  </button>
		  <button class="btn btn-primary btn-ghost btn-offset">
		    Offset
		  </button>
		  <button class="btn btn-primary btn-ghost btn-flip-down">
		    Flip Down
		    <div class="front">Flip Down</div>
		    <div class="back">Flip Down</div>
		  </button>
		  <button class="btn btn-primary btn-round btn-marquee">
		    <span data-text="Marquee">Marquee</span>
		  </button>
		  <button class="btn btn-primary btn-ghost btn-cross">
		    Cross Bar
		  </button>
		  <button class="btn btn-primary btn-ghost btn-open-line">
		    Line
		  </button>
		</div>
	</body>
</html>
